import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import axios from 'axios'

import config from '../../config.js'

import MessageHeader from '../../components/MessageHeader'
import MessageList from '../../components/MessageList'

export default class Message extends Component {

  constructor(props) {
    super(props)

    this.state = {
      count: 0
    }
  }

  componentDidMount() {
    axios.get(`${config.host}/contacters/${this.props.params.id}`)
      .then(response => {
        let result = response.data
        if (parseInt(result.code) === 0) {
          this.setState({ contacter: result.data.contacter })
        }
      })

    axios.get(`${config.host}/contacters/${this.props.params.id}/messages/count`)
      .then(response => {
        let result = response.data
        if (parseInt(result.code) === 0) {
          this.setState({ count: result.data.count })
        }
      })
  }

  render() {
    return (
      <div id="message">
        <MessageHeader contacter={ this.state.contacter }
          messageCount={ this.state.count }>
        </MessageHeader>
        <MessageList { ...this.props } />
      </div>
    )
  }
}